<template>
    <div>
        <div class="flex items-center justify-between text-lg text-center">
            <div class="flex items-center space-x-1" @click="isLike = !isLike">
                <div>
                    <ITabler:thumb-up v-show="!isLike" />
                    <ITabler:thumb-up-filled v-show="isLike" class="text-red-500" />
                </div>
                <span class="text-xs">33</span>
            </div>
            <div class="flex items-center space-x-1">
                <!-- <IHeroicons:chat-bubble-bottom-center/> -->
                <IAkar-icons:chat-dots />
                <span class="text-xs">33</span>
            </div>
            <div class="flex items-center space-x-1" @click="showShare">
                <IMingcute:share-2-line />
                <span class="text-xs">33</span>
            </div>

            <div></div>
            <IIconParkOutline:more @click="showAction" />
        </div>
        <Popup ref="popupRef">
            <div class="text-gray-600 bg-white rounded-t-lg">
                <div class="flex items-center justify-center py-2 border-b">
                    <div class="w-10 h-10 overflow-hidden rounded-full">
                        <LazyImage :src="g" />
                    </div>
                    <div class="ml-2">一念之间</div>
                </div>
                <div class="px-2 text-center ">
                    <div v-for="(item, index) in actions" class="py-2" @click="item.handler">
                        {{ item.text }}
                    </div>
                </div>
                <div class="py-3 text-center border-t" @click="closeAction">取消</div>
            </div>
        </Popup>
        <Toast ref="toastRef" />
        <Share ref="shareRef" :icon="false" />
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/home/1.jpg'
const isLike = ref(false);
const toastRef = ref();
const popupRef = ref();
const shareRef = ref();
const showShare = () => {
    shareRef.value?.open()
}
const showAction = () => {
    console.log('showAction')
    popupRef.value?.open();
}
const closeAction = () => {
    popupRef.value?.close();
}

const actions = [
    {
        text: 'Ta 的主页',
        handler() {
            toastRef.value.show('Ta 的主页')
        }
    },
    {
        text: '关注',
        handler() {
            toastRef.value.show('关注')
        }
    },
    {
        text: '不看 Ta',
        handler() {
            toastRef.value.show('不看 Ta')
        }
    },
    {
        text: '举报',
        handler() {
            toastRef.value.show('举报')
        }
    }
]

</script>
    
<style></style>